<template>
  <div class="common-body-wrapper">
    <search-header
      single-width="130"
      :searchList="searchList"
      @changeHeight="toRetTable"
      @confirmSearch="toSearch"
      :isNeedTree="true"
      :isCheckbox="true"
      :paramName="paramName"
      @setSelectedNode="setSelectedNode"
    ></search-header>
    <div class="common-table-tree-wrapper">
      <div class="common-table-wrapper">
        <multi-fun-table
          :sortColumn="notFormatColumn"
          :orderType="sortType"
          :fixed-cols="fixedCols"
          :is-reset-table="isResetTable"
          :theads-info="theadsInfo"
          :tbodys-info="tbodysInfo"
          @handleMultiCheck="handleMultiCheck"
          @handleSortColumn="handleSortColumn"
          @searchFn="getList"
          @getNextPage="getNextPage"
        >
          <!--按钮-->
          <div class="operate-btn-group" slot="operateBtnGroup">
            <a
              class="ake_btn ake_btn_text"
              v-if="isPermmited('SCORE:CONFIG:SAVE')"
              @click.prevent="toAdd()"
            >添加</a>
          </div>

          <!--普通列-->
          <template slot="tdCell" slot-scope="props">
            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              :min-width="props.minWidth"
              :width="props.width"
              :prop="props.prop"
              :sortable="props.sortable"
            >
              <template slot-scope="scope">
                <span v-if="'reno' == props.prop&&scope.$index!==0">{{ scope.$index +1}}</span>
                <span
                  v-else-if="'configStatus' == props.prop"
                >{{ scope.row.configStatus |configStatus }}</span>
                <span
                  v-else-if="'configRule' == props.prop"
                >{{ scope.row.reliefRuleScore}}积分兑换{{scope.row.reliefRuleValue}}元</span>
                <span
                  v-else-if="'validTime' == props.prop"
                >{{ scope.row.validFrom}}至{{ scope.row.validTo}}</span>
                <span v-else :title="scope.row[props.prop]">{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>

          <!--操作列内的按钮-->
          <template slot="operateCell" slot-scope="props">
            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              width="115"
              class="operateCell"
            >
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.configStatus==1 && isPermmited('SCORE:CONFIG:UPDATESTATUS')"
                  size="small"
                  type="primary"
                  icon="icon-lock"
                  class="ake-icon-font"
                  title="禁用"
                  @click="toDisable(scope.row)"
                  plain
                ></el-button>
                <el-button
                  v-if="scope.row.configStatus==0 && isPermmited('SCORE:CONFIG:UPDATESTATUS')"
                  size="small"
                  type="primary"
                  icon="icon-unlock_normal"
                  class="ake-icon-font"
                  title="启用"
                  @click="toEnable(scope.row)"
                  plain
                ></el-button>
                <el-button
                  size="small"
                  type="danger"
                  icon="icon-delete"
                  class="ake-icon-font"
                  title="删除"
                  v-if="isPermmited('SCORE:CONFIG:DEL')"
                  @click="toDel(scope.row)"
                  :disabled="Date.parse(new Date(scope.row['validFrom']))<=Date.parse(new Date())"
                  plain
                ></el-button>
                <el-button
                  size="small"
                  type="primary"
                  icon="icon-edit"
                  class="ake-icon-font"
                  title="编辑"
                  v-if="isPermmited('SCORE:CONFIG:SAVE')"
                  @click="toEdit(scope.row)"
                  :disabled="Date.parse(new Date(scope.row['validFrom']))<=Date.parse(new Date())"
                  plain
                ></el-button>
              </template>
            </el-table-column>
          </template>
        </multi-fun-table>

        <!---->
        <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
      </div>
    </div>

    <!--编辑配置-->
    <basic-modal ref="configModal" width="680" customeClass="config-modal" static="true">
      <h3 class="modal-otitle" slot="title">{{handleStatu==1?'添加-积分配置':'编辑-积分配置'}}</h3>
      <div class="modal-body" slot="modal-body">
        <el-form
          ref="configForm"
          :model="saveConfig"
          :rules="configRules"
          label-position="left"
          label-width="80px"
          style="width: 520px"
        >
          <el-form-item label="配置名称" prop="configName">
            <el-input placeholder="请输入配置名称" v-model="saveConfig.configName"></el-input>
          </el-form-item>
          <el-form-item label="适用车场" prop="parkNameList">
            <div class="park">
              <template v-if="saveConfig.parkNameList.length">
                <el-tooltip placement="bottom-start">
                  <div slot="content">
                    <ul class="selectParkingLotTree">
                      <li
                        v-for="(item,index) in curParkList"
                        :key="index"
                        style="margin-bottom: 4px; font-size: 12px;"
                      >
                        {{ item }}
                        <!-- <ul v-for="it in item.children">
                              <li>{{it.name}}</li>
                        </ul>-->
                      </li>
                    </ul>
                  </div>
                  <div class="selected-parkingLot">{{inputParkstr}}</div>
                </el-tooltip>
              </template>

              <div
                v-if="!saveConfig.parkNameList.length"
                class="selected-parkingLot be-grey"
              >未选择任何停车场</div>
              <el-button
                size="small"
                type="primary"
                @click="toSelectPark"
                class="select-park-btn ake_btn_text"
              >选择停车场</el-button>
            </div>
            <!-- <el-input placeholder="请选择停车场" type="textarea" :disabled="true" v-model="saveConfig.parkNameList" class="select-park-textarea"></el-input> -->
          </el-form-item>
          <el-form-item label="有效日期" prop="validTime" style="margin-bottom: 20px">
            <el-date-picker
              v-model="saveConfig.validTime"
              type="datetimerange"
              align="right"
              placeholder="请选择"
              :editable="false"
              :clearable="false"
              :picker-options="afterPickerOptions"
              :default-time="['00:00:00', '23:59:59']"
            ></el-date-picker>
          </el-form-item>
          <div class="coupon-line form-item-hasBg">
            <el-form-item label="抵扣规则" prop="configRule" class="form-item-inline coupon-inline3">
              <el-input
                placeholder="多少"
                type="number"
                min="0"
                step="1"
                v-model="saveConfig.reliefRuleScore"
                class="config-rule has-unit"
              ></el-input>
              <span class="inline-unit1">积分</span>
              <span>抵扣</span>
              <el-input
                placeholder="多少"
                type="number"
                min="0"
                step="0.01"
                v-model="saveConfig.reliefRuleValue"
                class="config-rule has-unit"
              ></el-input>
              <span class="inline-unit2">元</span>
            </el-form-item>
            <el-form-item
              class="form-item-inline coupon-inline2 last-inline"
              label="单次最高抵扣"
              prop="maxReliefValue"
              label-width="100px"
            >
              <el-input
                placeholder="多少"
                type="number"
                min="0"
                step="1"
                v-model="saveConfig.maxReliefValue"
                class="has-unit"
              ></el-input>
              <span class="inline-unit2">积分</span>
            </el-form-item>
          </div>
          <!--<el-form-item label="备注" prop="remark">
            <el-input placeholder="请输入备注" type="textarea" :rows="2" v-model="saveConfig.remark"></el-input>
          </el-form-item>-->
        </el-form>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <el-button
          type="primary"
          class="ake_btn ake_btn_text ake_btn_confirm"
          @click.stop="submit('configForm')"
        >确认</el-button>
        <button class="ake_btn ake_btn_text modal-close" @click="closed('configModal')">取消</button>
      </div>
    </basic-modal>

    <!--选择停车场树-->
    <basic-modal ref="selectParkModal" width="400" customeClass="select-park-modal" static="true">
      <h3 slot="title">选择停车场</h3>
      <div class="modal-body" slot="modal-body">
        <div class="common-tree modal-tree-box">
          <ul id="ParkTree" name="ParkTree" class="ztree"></ul>
        </div>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button
          type="button"
          class="ake_btn ake_btn_text ake_btn_confirm"
          @click="selectParkSure()"
        >确认</button>
        <button class="ake_btn ake_btn_text modal-close" @click="closed('selectParkModal',2)">取消</button>
      </div>
    </basic-modal>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";

// 引进vue的js
import js from "./js/config.js";

export default {
  name: "scoreConfig",
  mixins: [common, stardardList, invokeModal, js],
  data() {
    var today = [
      new Date(moment().format("YYYY-MM-DD 00:00:00")),
      new Date(moment().format("YYYY-MM-DD 23:59:59"))
    ];
    return {
      total: 0,
      fixedCols: 4,
      paramName: "query_parkId",
      searchList: [
        {
          index: 0,
          isShow: false,
          type: "datePicker",
          name: "query_valid",
          text: "有效日期",
          propName: "query_validFrom,query_validEnd",
          value: today,
          style: { width: "360px" }
        },
        {
          index: 1,
          isShow: false,
          type: "select",
          name: "query_configStatus",
          text: "状态",
          value: "",
          options: [
            { name: "--全部--", value: "" },
            { name: "禁用", value: "0" },
            { name: "启用", value: "1" }
          ]
        }
      ],
      theadsInfo: [
        // { index: 0, isShow: false, prop: 'reno', text: '序号', width: 68 },
        {
          index: 1,
          isShow: false,
          prop: "id",
          text: "ID",
          minWidth: 40,
          initHidden: true
        },
        {
          index: 2,
          isShow: false,
          prop: "configName",
          text: "配置名称",
          minWidth: 50
        },
        {
          index: 3,
          isShow: false,
          prop: "configStatus",
          text: "状态",
          minWidth: 40
        },
        {
          index: 4,
          isShow: false,
          prop: "parkName",
          text: "适用车场", //停车场名称
          minWidth: 60
        },
        {
          index: 5,
          isShow: false,
          prop: "configRule",
          text: "抵扣规则", //配置规则
          minWidth: 60
        },
        {
          index: 6,
          isShow: false,
          prop: "validTime",
          text: "有效日期", //有效期
          minWidth: 120
        }
        // {
        //   index: 7,
        //   isShow: false,
        //   prop: "remark",
        //   text: "备注",
        //   minWidth: 50,
        //   initHidden: true
        // }
      ],
      tbodysInfo: []
    };
  }
};
</script>

<style lang="less">
@import "../../assets/less/manage.less";

//私人配置
.modal-otitle {
  font-size: 16px;
  padding-left: 14px;
}
.modal-otextarea {
  width: 255px;
  height: 30px;
}

.be-grey {
  color: #666666;
}
.coupon-line {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    //inputType为number时候禁用上下箭头
    -webkit-appearance: none;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }
  .last-inline {
    padding-left: 20px;
  }
  .coupon-inline {
    flex: 1;
  }
  .coupon-inline2 {
    flex: 2;
  }
  .coupon-inline3 {
    flex: 3;
  }
}
.park {
  display: flex;
  .el-form-item {
    flex: 1;
    margin-right: 35px;
  }
}

.config-modal {
  padding-bottom: 30px;
  .modal-body {
    overflow-y: scroll;
  }
  .select-park-textarea {
    width: 255px;
    margin-right: 11px;
    color: #333;
    > textarea {
      height: 30px !important;
    }
  }
  .el-textarea.is-disabled .el-textarea__inner {
    color: #333 !important;
  }
}
.form-item-inline {
  position: relative;
  > .el-form-item__content {
    > .config-rule {
      flex: 1;
    }
    span {
      line-height: 30px;
      margin: 0 6px;
    }
    .inline-unit1 {
      position: absolute;
      top: 0;
      left: 50px;
      z-index: 1;
    }
    .inline-unit2 {
      position: absolute;
      top: 0;
      right: 5px;
      z-index: 1;
    }
  }
}
</style>
